<template>

    <div class="container">
        <van-nav-bar title="附件上传" left-arrow @click-left="onClickLeft" />

        <div class="container-step">
            <Steps :currentSwipeItem="2"></Steps>
        </div>
        <div class="container-form">
            <van-form>
                <div class="container-form-item">

                    <div class="container-form-item-title">公共场所卫生许可申请表</div>
                    <div class="container-form-item-bottom">
                        (没有申请表，在线填写电子化表单)
                    </div>
                    <van-field name="uploader">
                        <template #input>
                            <van-uploader v-model="applicationImg" />
                        </template>
                    </van-field>

                    <div class="container-form-item-title">卫生许可证(正本)</div>
                    <van-field name="uploader">
                        <template #input>
                            <van-uploader v-model="cardOn" />
                        </template>
                    </van-field>

                    <div class="container-form-item-title">卫生许可证(副本)</div>
                    <van-field name="uploader">
                        <template #input>
                            <van-uploader v-model="cardHou" />
                        </template>
                    </van-field>

                    <div class="container-form-item-title">法定代表人(负责人)身份证复印件</div>
                    <van-field name="uploader">
                        <template #input>
                            <van-uploader v-model="cardCopy" />
                        </template>
                    </van-field>

                    <div class="container-form-item-title">委托他人办理的需提供《委托书》</div>
                    <van-field name="uploader">
                        <template #input>
                            <van-uploader v-model="engagementLetter" />
                        </template>
                    </van-field>

                    <div class="container-form-item-title">营业执照</div>
                    <van-field name="uploader">
                        <template #input>
                            <van-uploader v-model="businessLicense" />
                        </template>
                    </van-field>
                </div>

            </van-form>
        </div>
        <div class="container-confirm">
            <van-button style="width: 85%;margin-bottom: 10px;" type="primary" @click="submit">
                提交
            </van-button>
            <van-button style="width: 85%;margin-bottom: 10px;" plain type="primary" @click="nextStep">
                下一步
            </van-button>
        </div>

    </div>
</template>

<script setup>
import Steps from '@/components/steps.vue'
import { reactive, ref } from 'vue'
import { useRouter } from 'vue-router'
const router = useRouter()
const active = ref(2)
const onClickLeft = () => history.back();
const applicationImg = ref([])
const cardOn = ref([])
const cardHou = ref([])
const cardCopy = ref([])
const engagementLetter = ref([])
const businessLicense = ref([])

const submit = () => {
    console.log(businessLicense);
}
const nextStep = () => {
    router.push({
        name: 'Appointment'
    })
}
</script>

<style lang="scss" scoped>
.container {
    &-step {
        width: 100%;
        height: 80px;
        background-color: #fff;
    }

    &-confirm {
        margin-top: 30px;
    }

    &-form {
        border-radius: 10px;
        margin: 0 auto;
        height: auto;
        width: 95%;
        margin-top: 10px;
        background-color: #fff;

        &-item {

            // border-bottom: 1px solid #eee;
            overflow: hidden;

            &-title {
                margin: 10px;
                text-align: left;
                font-weight: 550;
            }

            &-bottom {
                margin: 10px;
                font-size: 16px;
                color: #1989fa;
                text-align: left;
            }

            .item1 {
                display: flex;
                flex-direction: row;
            }
        }


    }
}
</style>